<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="/layui/lib/echarts.min.js"></script>
    <script src="/layui/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main1" style="width: 600px;height:500px; display: inline-block; margin-top: 7%;"></div>
    <div id="main2" style="width: 600px;height:480px; display: inline-block; margin-top: 5%; margin-left: 3%;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));

        $.ajax({
            "url": "http://localhost:8080/room/histogram",
            "success": function (result) {

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: 'RoomType Display Of Histogram'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: result.propertyList,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'num',
                            type: 'bar',
                            barWidth: '60%',
                            data: result.numList
                        }
                    ]
                };
                // 使用刚指定的配置项和数据，将其引入到echarts对象myChart中
                option && myChart1.setOption(option);
            }
        })

        $.ajax({
            "url": "http://localhost:8080/room/pie",
            "success": function (result) {

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: 'Floor Display Of Pie'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '楼层',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: result
                        }
                    ]
                };

                option && myChart2.setOption(option);

            }
        })

        // option = {
        //     tooltip: {
        //         trigger: 'item'
        //     },
        //     legend: {
        //         top: '5%',
        //         left: 'center'
        //     },
        //     series: [
        //         {
        //             name: 'Access From',
        //             type: 'pie',
        //             radius: ['40%', '70%'],
        //             avoidLabelOverlap: false,
        //             label: {
        //                 show: false,
        //                 position: 'center'
        //             },
        //             emphasis: {
        //                 label: {
        //                     show: true,
        //                     fontSize: '40',
        //                     fontWeight: 'bold'
        //                 }
        //             },
        //             labelLine: {
        //                 show: false
        //             },
        //             data: [
        //                 { value: 1048, name: 'Search Engine' },
        //                 { value: 735, name: 'Direct' },
        //                 { value: 580, name: 'Email' },
        //                 { value: 484, name: 'Union Ads' },
        //                 { value: 300, name: 'Video Ads' }
        //             ]
        //         }
        //     ]
        // };

        // option && myChart2.setOption(option);


    </script>
</body>

</html>